<template>
    <div class="layout-padding">
        <div class="layout-padding-auto layout-padding-view">
            <!--查询表单-->
            <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList(false)">
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary"  @click="getDataList(false)">{{$t('appVerManage.query')}}</el-button>
                    <el-button icon="upload" type="success" plain @click="uploadDialogRef.openDialog()">{{$t('appVerManage.upload')}}</el-button>
                </el-form-item>
            </el-form>
             <!--查询结果的列表-->
          <el-table :data="state.dataList" highlight-current-row
                    v-loading="state.loading" border style="width: 100%;height: 100%"
                    :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle">
            <el-table-column type="selection" width="40" align="center"/>
            <el-table-column type="index" label="#" width="50" />
            <el-table-column prop="version" :label="$t('appVerManage.version')">
                <template #default="scope">
                    <el-tag type=''>
                         {{ 'v_' + scope.row.version }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="fileName" :label="$t('appVerManage.fileName')"/>
            <el-table-column prop="remark" :label="$t('appVerManage.remark')" />
            <el-table-column prop="createUserName" :label="$t('appVerManage.createUserName')" />
            <el-table-column prop="creationTime" :label="$t('appVerManage.creationTime')" />
            <el-table-column :label="$t('appVerManage.operation')" width="140">
              <template #default="scope">
                <el-button icon="Download" type="primary"
                           @click="downloadApp(scope.row.url)">{{$t('appVerManage.download')}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
        </div>
        <uploadForm ref="uploadDialogRef" @getChildren="oncFun" />
    </div>
</template>

<script setup lang="ts" >
import { defineAsyncComponent, reactive, ref } from "vue";
import { BasicTableProps, useTable } from "/@/hooks/table";
import {getAppVersionList} from "/@/api/platform/digital/appVerManage";
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
const uploadForm =  defineAsyncComponent(() => import('./uploadForm.vue'));

// 搜索变量
const queryRef = ref()
const uploadDialogRef = ref()

const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: getAppVersionList
})

//下载
const downloadApp = async (downloadurl:any) => {
    try {
        // const response = await fetch(downloadurl);
        // const blob = await response.blob();
        // const url = window.URL.createObjectURL(new Blob([blob]));
        // const link = document.createElement('a');
        // link.href = url;
        // link.setAttribute('download', 'MFApp.apk');
        // document.body.appendChild(link);
        // link.click();
        // document.body.removeChild(link);
        window.open(downloadurl, '_blank')
      } catch (error) {
        console.error('Failed to download file:', error);
      }
}

const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)

const oncFun = () => {
    getDataList(false)
}


</script>